<template>
  <div>

    <el-row>
      <el-form
          inline
          label-position="left"
      >

        <!-- 所属区域 -->
        <el-form-item
            label="所属区域">
          <Select
              @SelectChange="districtChange"
              :flushFlag="resettingFlag"
              :options="districtOptions"
          ></Select>
        </el-form-item>

        <!-- 频点分类 -->
        <el-form-item
            label="频点分类">
          <Select
              @SelectChange="freqCategoryChange"
              :flushFlag="resettingFlag"
              :options="freqCategoryOptions"
          ></Select>
        </el-form-item>

        <!-- 搜索频点 -->
        <el-form-item
            label="搜索频点">
          <el-input
              style="width: 175px"
              size="mini"
              v-model="freq"
              placeholder="请输入频点"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              size="mini"
              @click="selectSubmit"
          >查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// --------------- element-ui ---------------------
import Select from "../../../../../components/element-ui/elSelect"
// ------------- axios ---------------------

export default {
  components: {
    Select
  },
  data() {
    return {
      //  ----------- 查询表单 --------------
      resettingFlag: false, // 重置查询条件标识
      district: undefined,
      freqCategory: undefined,
      freq: undefined
    }
  },
  props: {
    Reset: {
      type: Boolean,
      default: false
    },
    districtOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    freqCategoryOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  watch: {
    Reset: function () {
      this.resettingSelectOption()
    }
  },
  methods: {
    // ------------- axios ----------------
    // -------------- 查询功能 --------------

    /**
     * 重置查询条件
     * */
    resettingSelectOption: function () {
      this.district = undefined;
      this.freqCategory = undefined;
      this.freq = undefined;
      this.resettingFlag = !this.resettingFlag;
      this.$emit("resetSelectForm");
    },

    /**
     * 所属区域
     * @param val
     */
    districtChange: function (val) {
      this.district = val;
    },

    /**
     * 频点分类
     * @param val
     */
    freqCategoryChange: function (val) {
      this.freqCategory = val;
    },

    /**
     * 提交检索条件
     */
    selectSubmit: function () {
      // if (this.district === 0) {
      //   this.$emit("resetSelectForm");
      //   return 0
      // }
      const pd = {
        district: this.district,
        freq: this.freq,
        type: this.freqCategory,
      }
      this.$emit("selectChange", pd);
    }
  },
}
</script>

<style>

.el-form {
  text-align: left;
}

.el-form-item {
  margin-left: 1.5vw;
}
</style>